<template>
    <div class="container">
        <HeaderBar />
        <div class="container_main">
            <div class="goods_view">
                <div class="goods_view_info">
                    <div class="goods_view_info_l">
                        <div class="goods_view_info_l_subPic">
                            <img
                                v-for="(item, index) in detail.subPics"
                                :key="index"
                                :src="item"
                                @click="changeMainPic(item)"
                            />
                        </div>
                        <img
                            :src="mainPic"
                            class="goods_view_info_l_mainPic"
                        />
                    </div>
                    <div class="goods_view_info_r">
                        <div class="goodsname">{{detail.name}}</div>
                        <div class="goodsprice">¥{{price}}</div>
                        <div class="stock">
                            库存<span>{{stock}}</span>
                        </div>
                        <div class="goodsskus" v-for="(item, index) in specs" :key="index">
                            <div
                                class="goodsskus-name"
                            >
                                {{item.name}}
                            </div>
                            <div
                                class="goodsskus-value"
                                v-for="json in item.values"
                                :key="json.id"
                                @click="chooseSku(item.name, json.name, json.id)"
                                :class="{active: selectSku[item.name].id == json.id}"
                            >
                                {{json.name}}
                            </div>
                        </div>
                        <div class="goodsNum">
                            <label>数量</label>
                            <img
                                src="../../assets/images/cart/reduce.png"
                                class="reduce"
                                @click="reduce"
                            />
                            <span>{{volume}}</span>
                            <img
                                src="../../assets/images/cart/add.png"
                                class="add"
                                @click="add"
                            />
                        </div>
                        <div class="addCart" @click="addCart">
                            <img
                                src="../../assets/images/cartIcon.png"
                                class="addCart_icon"
                            />
                            加入购物车
                        </div>
                    </div>
                </div>
                <div class="goods_view_desc">
                    <div class="goods_view_desc_title">产品详情</div>
                    <div class="goods_view_desc_infos">
                        <div
                            class="goods_view_desc_infos_item"
                            v-for="(item, index) in detail.properties"
                            :key="index"
                        >
                            <label>{{item.name}}</label>{{item.value}}
                        </div>
                        <div class="goods_view_desc_infos_item">
                            <label>商品描述</label>{{detail.desc}}
                        </div>
                        <div class="goods_view_desc_infos_item">
                            <label>材质</label>{{detail.material}}
                        </div>
                        <div class="goods_view_desc_infos_item">
                            <label>体积</label>{{detail.volume}}
                        </div>
                        <div class="goods_view_desc_infos_item">
                            <label>风格</label>
                            <span v-for="(item, index) in detail.styles" :key="index">{{item}}   </span>
                        </div>
                        <div class="goods_view_desc_infos_item">
                            <label>货期</label>{{detail.deliveryTime}}天
                        </div>
                    </div>
                </div>
                <div class="goods_view_detail" v-html="detail.detail"></div>
            </div>
        </div>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    GetGoodsDetail,
    PostCartAdd
} from '@api/api';
export default {
    data() {
        return {
            id: null,
            detail: {},
            mainPic: '',
            volume: 1,
            selectSku: {},
            sku: [],
            specs: [],
            stock: null,
            price: null
        }
    },
    created () {
        let {
            id
        } = this.$route.params;
        this.id = id;
        this.getInit();
    },
    components: {
        HeaderBar,
    },
    methods: {
        getInit() {
            GetGoodsDetail({id: this.id})
                .then(res=>{
                    res.data.subPics.unshift(res.data.mainPic);
                    let {
                        sku,
                        specs
                    } = res.data;
                    sku = sku.map(item=>{
                        item.skuId = '';
                        item.specs.forEach(json=>{
                            item.skuId = `${item.skuId}${json.name}-${json.value};`
                        });
                        return item;
                    });
                    let selectSku = {};
                    specs = specs.map((item, index)=>{
                        selectSku[item.name] = '';
                        item.values = [];
                        item.value.forEach((json, key)=>{
                            item.values.push({
                                name: json,
                                id: `${index}-${key}`
                            })
                        });
                        return item;
                    });
                    specs.forEach(item=>{
                        console.log('item.name', item.value)
                        selectSku[item.name] = {};
                        selectSku[item.name].id = item.values[0].id;
                        selectSku[item.name].value = `${item.name}-${item.value[0]}`;
                    });
                    this.stock = sku[0].stock;
                    this.price = sku[0].price;
                    this.selectSku = selectSku;
                    this.specs = specs;
                    this.sku = sku;
                    this.detail = res.data;
                    this.mainPic = res.data.mainPic;
                });
        },
        changeMainPic(src) {
            this.mainPic = src;
        },
        chooseSku(name, value, key) {
            this.selectSku[name] = {};
            this.selectSku[name].id = key;
            this.selectSku[name].value = `${name}-${value}`;
            console.log('selectSku', this.selectSku);
            let {
                selectSku,
                sku,
                volume
            } = this;
            let itemId = '';
            let skuSpecs = [];
            let keys = Object.keys(selectSku);
            let skuSelected = '';
            keys.reverse().forEach(item=>{
                skuSelected = `${skuSelected}${selectSku[item].value};`
            });
            sku.forEach(item=>{
                if (item.skuId == skuSelected) {
                    itemId = item.itemId;
                    skuSpecs = item.specs;
                    this.stock = item.stock;
                    this.price = item.price;
                }
            });
        },
        reduce() {
            if (this.volume == 1) {
                return;
            }
            this.volume = this.volume - 1;
        },
        add() {
            this.volume = this.volume + 1;
        },
        addCart() {
            let token = localStorage.getItem('token');
            if (!token) {
                this.$message({
                    message: '请先登录!',
                    type: 'error'
                });
                return false;
            }
            let {
                selectSku,
                sku,
                volume
            } = this;
            let itemId = '';
            let skuSpecs = [];
            let keys = Object.keys(selectSku);
            let list = Object.keys(selectSku);
            let skuSelected = '';
            let skuSelected1 = '';
            list.forEach(item=>{
                console.log('item', item)
                skuSelected1 = `${skuSelected1}${selectSku[item].value};`
            });
            keys.reverse().forEach(item=>{
                skuSelected = `${skuSelected}${selectSku[item].value};`
            });
            sku.forEach(item=>{
                if (item.skuId == skuSelected || item.skuId == skuSelected1) {
                    itemId = item.itemId;
                    skuSpecs = item.specs;
                }
            });
            let params = {
                itemId,
                skuSpecs,
                volume
            }
            if (skuSpecs.length == 0) {
                this.$message({
                    message: '请选择商品规格!',
                    type: 'error'
                });
                return false;
            }
            PostCartAdd(params)
                .then(res=>{
                    this.$store.dispatch('cart/getCartNum', {}).then((res) => {
                    }).catch(() => {
                    })      
                    this.$message({
                        message: '成功加入购物车!',
                        type: 'success'
                    });
                });
        }
    }
}
</script>
<style>
body {
    background: #FFFFFF;
}
</style>
<style scoped>
    @import './index.css';
</style>